<template>
  <!-- 投放时段 -->
  <div class="drop-time">
    <table
      class="drop-time__body"
      cellpadding="0"
      cellspacing="0"
    >
      <tr>
        <th class="drop-time__week">&nbsp;</th>
        <th
          class="drop-time__th"
          v-for="(item, itemIndex) in 24"
          :key="item"
        >{{itemIndex}}</th>
      </tr>
      <tr
        v-for="(week, weekIndex) in weekData"
        :key="weekIndex"
      >
        <th class="drop-time__week">{{week}}</th>
        <td
          v-if="weekIndex === 0"
          colspan="24"
          rowspan="7"
        >
          <div
            class="drop-time__times"
            ref="times"
            @mousedown="timesMousedown"
          >
            <div
              class="drop-time__time"
              ref="time"
              :data-week="time.week"
              :data-value="time.value"
              :class="[
                                time.__checked ? 'is-selected' : '',
                                time.__checked_pre ? 'is-selected--pre' : '',
                             ]"
              @click="clickSelected(time)"
              v-for="(time, timeIndex) in propData"
              :key="timeIndex"
            ></div>
          </div>
        </td>
      </tr>
    </table>
    <div class="drop-time__footer">
      <!-- 快速设置 -->
      <div class="drop-time__quick">
        <span>快速设置：</span>
        <el-radio
          v-model="puttimeQuick"
          label="0"
          @change="quickSelected([0, 1, 2, 3, 4])"
        >周一到周五投放</el-radio>
        <el-radio
          v-model="puttimeQuick"
          label="1"
          @change="quickSelected([5, 6])"
        >周末投放</el-radio>
        <el-radio
          v-model="puttimeQuick"
          label="2"
          @change="quickSelected([])"
        >全部清空</el-radio>
      </div>
      <!-- 时段标识 -->
      <div class="drop-time__ident">
        <div class="drop-time__ident-item">
          <i class="drop-time__ident-item__item drop-time__ident-item__item--checked"></i>
          <span>投放时间段</span>
        </div>
        <div class="drop-time__ident-item">
          <i class="drop-time__ident-item__item drop-time__ident-item__item--default"></i>
          <span>暂停时间段</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DropTime",
  props: {
    data: {
      type: Array,
      default() {
        let data = [];
        for (let i = 0; i < 7 * 24; i++) {
          let week = Math.floor(i / 24),
            value = i % 24,str = "0";
          data.push({
            week,
            value,
            str,
            __checked: false,
            __checked_pre: false
          });
        }
        return data;
      }
    },
    value: String,
    disabled: Boolean
  },
  data() {
    return {
      weekData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      propData: this.data,
      puttimeQuick: ""
    };
  },
  watch: {
    value(v) {
      if (v) {
        this.setSelected(v.split(","));
      }
    }
  },
  mounted(){
    console.log(this.value)
    if(this.value){
      this.setSelected(this.value.split(","));
    }
  },
  methods: {
    // 框选
    timesMousedown(event) {
      if (this.disabled) return false;
      let ev = window.event || event;
      let startX = ev.x || ev.clientX;
      let startY = ev.y || ev.clientY;
      document.onmousemove = event => {
        let ev = window.event || event;
        let endX = ev.x || ev.clientX;
        let endY = ev.y || ev.clientY;
        for (let i = 0; i < this.$refs.time.length; i++) {
          let rect = this.$refs.time[i].getBoundingClientRect();
          let l = rect.x;
          let t = rect.y;
          let range = 30;

          if (
            // 上左（包含直上、直左） startX >= endX && startY >= endY
            (l < startX &&
              l + range > endX &&
              t < startY &&
              t + range > endY) ||
            // 下左 startX > endX && startY < endY
            (l < startX &&
              l + range > endX &&
              t + range > startY &&
              t < endY) ||
            // 上右 startX < endX && startY > endY
            (l + range > startX &&
              l < endX &&
              t < startY &&
              t + range > endY) ||
            // 下右（包含直下、直右） startX <= endX && startY <= endY
            (l + range > startX && l < endX && t + range > startY && t < endY)
          ) {
            this.propData[i].__checked_pre = true;
          }
        }
        ev.preventDefault();
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        for (let item of this.propData) {
          if (item.__checked_pre) {
            // 已经选择了，再选择的取消选择，没选的再选择
            item.__checked = !item.__checked;
          }
          item.__checked_pre = false;
        }
        this.changeSelected();
      };
      event.preventDefault();
    },
    // 点击改变时间选择
    clickSelected(item) {
      if (this.disabled) return false;
      item.__checked = !item.__checked;
      this.changeSelected();
    },
    // 快速设置
    quickSelected(arr) {
      if (this.disabled) return false;
      // 快速设置
      this.propData.forEach(time => {
        time.__checked = arr.indexOf(time.week) !== -1;
      });
      this.changeSelected();
    },
    // 获取选中
    changeSelected() {
      let values = [];
      this.propData.forEach(time => {
        if (time.__checked) {
          /* values.push(`${time.week}-${time.value}`); */
          time.str = "1";
        }
         values.push(time.str);
      });
      this.$emit("update:value", values.join());
      this.$emit("change", values.join());
    },
    // 设置选中
    setSelected(selected = []) {
      console.log(selected,this.propData)
      
      selected.forEach((select,index) => {
        /* this.propData.forEach(time => {
          if ( time.str === select) {
            time.__checked = true;
          }
        }); */
        this.propData[index].str = select;
        if(select == "1"){
          this.propData[index].__checked = true
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/assets/scss/color";

.drop-time {
  width: 762px;
  color: $--text-major;
  .is-selected {
    background: $--text-high;
    color: $--background-high;
  }

  .is-selected--pre {
    background: lighten($--text-high, 30%);
    color: $--background-high;
  }

  &__th {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }

  &__week {
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: left;
  }

  &__times {
    overflow: hidden;
    text-align: center;
    line-height: 28px;
    border: 1px solid $--border-major;
    width: 720px;
  }
  &__time {
    float: left;
    width: 28px;
    height: 28px;
    border: 1px solid $--border-major;
  }

  &__footer {
    height: 40px;
    line-height: 40px;
  }
  &__quick {
    float: left;
  }
  &__ident {
    float: right;
    &-item {
      float: left;
      margin-left: 10px;
      &__item {
        display: inline-block;
        vertical-align: top;
        margin: 10px 5px 0 0;
        width: 16px;
        height: 16px;
        &--default {
          border: 2px solid $--border-major;
        }
        &--checked {
          border: 2px solid $--border-major;
          background: $--text-high;
        }
      }
    }
  }
}
</style>